<template>
  <div>
    <el-container style="height:700px;border:1px solid #eee">
      <!-- 头部 -->
      <el-header>
        <div style="font-size:40px;background-color:rgba(163, 165, 166, 0.258);">tlias辅助系统</div>
      </el-header>
      <el-container>
        <!-- 左侧 -->

        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/depts" style="text-decoration: none;">
                    部门管理
                  </router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/emp" style="text-decoration: none;">
                    员工管理
                  </router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 中间 -->
        <el-main>

          <!-- 查询行 -->
          <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchInfo.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchInfo.sex" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职时间从">
              <el-date-picker v-model="searchInfo.startDate" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 中心表格 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="序号">
            </el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column label="性别">
              <template slot-scope="scope">
                {{scope.row.gender == 1 ? '男':'女'}}
              </template>
            </el-table-column>
            <el-table-column label="职位">
              <template slot-scope="scope">
                <span v-if="scope.row.job == 1 ">班主任</span>
                <span v-else-if="scope.row.job == 2 ">讲师</span>
                <span v-else-if="scope.row.job == 3 ">学工主管</span>
                <span v-else-if="scope.row.job == 4 ">教研主管</span>
                <span v-else>咨询师</span>
              </template>

            </el-table-column>
            <el-table-column prop="entrydate" label="入职时间">
            </el-table-column>
            <el-table-column prop="deptId" label="所属部门">
              <template slot-scope="scope">
                <span v-if="scope.row.deptId == 1 ">学工部</span>
                <span v-else-if="scope.row.deptId == 2 ">教研部</span>
                <span v-else-if="scope.row.deptId == 3 ">咨询部</span>
                <span v-else-if="scope.row.deptId == 4 ">就业部</span>
                <span v-else>人事部</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="最后操作时间">
            </el-table-column>
            <el-table-column prop="Manager" label="操作">
              
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页 -->

          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="20"
            :pager-count="11" layout="prev, pager, next" :total="1000">
          </el-pagination>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
  import axios from "axios";
  export default {
    data() {
      return {
        tableData: [],
        searchInfo: {
          name: "",
          sex: "",
          startDate: []
        }
      }
    },
    methods: {
      onSubmit: function () {
        alert("查询")
      },
      handleSizeChange: function (val) {
        alert("页码变换" + val);
      },
      handleCurrentChange: function (val) {
        alert("页码变换" + val);
      },

    },
    mounted() {
      axios.get("http://localhost:8080/emps").then((result) => {
        this.tableData = result.data.data;
      });
    }
  };
</script>

<style>
</style>